import { useEffect, useState, useCallback, useRef } from 'react';
import { message, Popover, Select } from 'antd';
import { Button, Pagination, Row, Col, Modal, Input, Spin, DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import { Dayjs } from 'dayjs';
import debounce from 'lodash.debounce';
import api from '@/api/account';
import CustomizeHeader from '@/components/customizeHeader/customizeHeader';
import { useNavigate } from 'react-router-dom';
import EchartsPie from './EchartsPie';
// getDashboard
import { getDashboard } from '@/api/dashboard';
import './index.scss';
interface listParams {
    pageNum: number;
    keyword: string;
    status: string;
}
interface DataType {
    userName: string;
    userMobile: string;
    Gender: number;
    Personality: string;
    Age: number;
    createTime: number;
    LastActiveTime: number;
    disabled: boolean;
    userId: string;
}
const User = props => {
    const link = useNavigate();
    const [listParams, setListParams] = useState<listParams>({
        pageNum: 1,
        keyword: '',
        status: '',
    });
    const { RangePicker } = DatePicker;
    const [selectedDate, setSelectedDate] = useState<[any, any]>([null, null]);
    const [selectedDate1, setSelectedDate1] = useState<[any, any]>([{}, {}]);
    const [dashboardData, setDashboardData] = useState<{
        eqTestCompleted: string;
        eqTestNotStarted: string;
        frieneedToHelp: string;
        frieneedToPlay: string;
        frieneedToTalk: string;
        numberOfUsers: string;
    }>({
        eqTestCompleted: '0',
        eqTestNotStarted: '0',
        frieneedToHelp: '0',
        frieneedToPlay: '0',
        frieneedToTalk: '0',
        numberOfUsers: '0',
    });
    const disabledDate: RangePickerProps['disabledDate'] = current => {
        return current && current > dayjs().endOf('day');
    };
    // 处理日期变化
    const dateOnChange = date => {
        console.log(date);
        const dataMoment =
            date &&
            date.map(item => {
                if (item) {
                    return item;
                } else {
                    return null;
                }
            });
        console.log(dataMoment);
        setSelectedDate1(dataMoment);
        setSelectedDate(dataMoment);
        getData(date);
    };
    const inputChange = e => {
        debouncedSave({ ...listParams, keyword: e.target.value, pageNum: 1 });
    };
    const debouncedSave = useCallback(
        debounce(nextValue => setListParams(nextValue), 1500),
        []
    );
    const getData = async date => {
        console.log(selectedDate, 'zhe 2', selectedDate1);
        // 因为接口传参需要带“T”的
        const sTime = date && date[0] ? dayjs(date[0]).startOf('date').format('YYYY-MM-DDTHH:mm:ss') : null;
        const eTime = date && date[1] ? dayjs(date[1]).endOf('date').format('YYYY-MM-DDTHH:mm:ss') : null;
        const params = {
            startTime: sTime,
            endTime: eTime,
        };
        getDashboard(params).then(res => {
            if (res) {
                const obj = JSON.parse(JSON.stringify(res));
                setDashboardData(obj);
            }
        });
    };
    useEffect(() => {
        getData(null);
    }, []);
    const [filterVisible, setFilterVisible] = useState(false);
    return (
        <>
            <div className="page-main dashboard">
                <div className="container">
                    <div className="search-bar">
                        <div className="page-title">Dasboard</div>
                        <div className="search-bar-right">
                            {/* <Input
                                className="search-input"
                                placeholder="Search"
                                onChange={inputChange}
                                prefix={
                                    <img
                                        src={require('@/assets/images/search-icon.png')}
                                        style={{ width: 20, height: 20 }}
                                    />
                                }
                            />
                            <div className="filter-btn" onClick={() => setFilterVisible(true)}>
                                Filter
                                <img src={require('@/assets/images/filtering.png')} alt="filter-btn" />
                            </div> */}
                            <div className="select-date">
                                <RangePicker
                                    placeholder={['dd/mm/yy', 'dd/mm/yy']}
                                    separator="-"
                                    value={selectedDate || null}
                                    defaultValue={selectedDate}
                                    format="DD/MM/YYYY"
                                    suffixIcon={<img src={require('@/assets/images/calendar.png')} alt="" />}
                                    disabledDate={disabledDate}
                                    onChange={dateOnChange}
                                />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div className="card-box-s">
                            <div className="everyOneBox">
                                <div className="everyOneTopBox flexXStart">
                                    <img src={require('@/assets/images/icon1.png')} alt="" />
                                    <div>Number of user</div>
                                </div>
                                <div className="numberBox">{dashboardData.numberOfUsers || 0}</div>
                            </div>
                            <div className="everyOneBox">
                                <div className="everyOneTopBox flexXStart">
                                    <img src={require('@/assets/images/icon2.png')} alt="" />
                                    <div>FRIENeeD to play</div>
                                </div>
                                <div className="numberBox">{dashboardData.frieneedToPlay || 0}</div>
                            </div>
                            <div className="everyOneBox mt2">
                                <div className="everyOneTopBox flexXStart">
                                    <img src={require('@/assets/images/icon3.png')} alt="" />
                                    <div>FRIENeeD to help</div>
                                </div>
                                <div className="numberBox">{dashboardData.frieneedToHelp || 0}</div>
                            </div>
                            <div className="everyOneBox mt2">
                                <div className="everyOneTopBox flexXStart">
                                    <img src={require('@/assets/images/icon4.png')} alt="" />
                                    <div>FRIENeeD to talk</div>
                                </div>
                                <div className="numberBox">{dashboardData.frieneedToTalk || 0}</div>
                            </div>
                        </div>
                    </div>
                    <div className="chartsBox">
                        <div className="chartsTitle">FRIENeeD EQ test metric</div>
                        <div>
                            <EchartsPie dashboardData={dashboardData} />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default User;
